.page-right-enter {
	transform: translateX(-100%);
	position: fixed;
	top: 0px;
	height: 100%;
}

.page-right-leave {
	position: fixed;
	top: 0px;
	height: 100%;
	transform: translateX(-100%);
}

.page-right-leave-to  {
	position: fixed;
	top: 0px;	
	transform: translateX(-100%);
	height: 100%;
}

.page-right-enter-active {
	z-index: 9999;
	width: 100%;
	animation: page-right-in .5s;
}

.page-right-leave-active {
	z-index: 9998;
	width: 100%;
	animation: page-left-out .5s;
}


.page-left-leave-to {
	position: fixed;
	top: 0px;
	transform: translateX(100%);
}

.page-left-enter-to {
	height: 100%;
}

.page-left-enter {
	height: 100%;
}

.page-left-enter-active {
	z-index: 9999;
	width: 100%;
	animation: page-left-in .5s;
}

.page-left-leave-active {
	z-index: 9998;
	width: 100%;
	animation: page-right-out .5s;
}

@keyframes page-right-in {
	0% {
		transform: translateX(100%);
	},
	100% {
		transform: translateX(0%);
	}
}

@keyframes page-left-out {
	0% {
		transform: translateX(-0%);
	},
	100% {
		transform: translateX(-100%);
	}
}

@keyframes page-left-in {
	0% {
		transform: translateX(-100%);
	},
	100% {
		transform: translateX(0%);
	}
}

@keyframes page-right-out {
	0% {
		transform: translateX(0%);
	},
	100% {
		transform: translateX(100%);
	}
}